<template>
    <span>
        <i v-if="!symbol" :class="`iconfont ${icon}`" :style="styles"></i>
        <svg v-else :style="styles" class="icon">
            <use :xlink:href="`#${icon}`"></use>
        </svg>
    </span>
</template>
<script>
import '@/assets/iconFont/iconfont.js' 
export default {
    name: 'ZSIcon',
    props: {
        icon: {
            type: [String, Number],
        },
        styles: {},
        symbol: {
            type: [Boolean],
            default: () => false
        }
    }
}
</script>
<style lang="less" scoped>
.iconfont {
    font-size: 16px
}
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
@import "../../assets/iconFont/iconfont.css";
</style>